<template>
  <div class="chat">
    <div class="fixed-header ui-flex">
      <van-field left-icon="search" @click-left-icon="doSearch" class="input ui-flex-auto" clearable :border="false" placeholder="昵称" v-model="searchKey" />
      <span class="pl-8 pr-8" @click="$router.back()">取消</span>
    </div>
    <div class="list">
      <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index">
          <img class="item-avatar" :src="item.avatar || avatar" :alt="item.nickName" />
          <div class="item-main">
            <div class="item-name">{{ item.nickname }}</div>
            <van-icon name="plus" @click="goItem(item)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/napi'
import { Toast } from 'vant'
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      show: false,
      list: [],
      searchKey: '基础平台'
    }
  },
  mounted() {

  },
  methods: {
    doSearch() {
      api.searchUser({
        searchKey: this.searchKey
      }).then(res => {
        this.list = res
      })
    },
    goItem(item) {
      Toast.success('请求已发送')
      this.$store.dispatch('ch/addFriendApply', {
        r_user: item.id
      })
    }
  }
}
</script>

<style lang="less" scoped>
.fixed-header {
  padding: 8px 10px;
  background: #f5f5f5;
  padding-right: 0;
  .input {
    padding: 4px 10px;
    border-radius: 4px;
  }
}

.chat {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
.view {
  background-color: #eee;
}

.item {
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 12px;
  padding: 0 10px;
  background-color: #fff;
}

.item-main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 6px 10px;
  padding-left: 0px;
  padding-right: 0;
  &::after {
    position: absolute;
    bottom: 0;
    content: " ";
    display: block;
    height: 1px;
    width: 100%;
    background: #eee;
    transform: scaleY(.5);
  }
}

.item-avatar {
  float: left;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 4px;
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-msg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
}

.gray {
  color: #666;
  font-size: 12px;
}

.item-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.login-tip {
  padding: 20px;
  padding-top: 40%;
  text-align: center;
  color: #999;
}

.btn-login {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate3d(-50%, -50%, 0);
}

.icon-login {
  font-size: 45px;
  color: #666;
  width: 50px;
}

.login-text {
  font-size: 12px;
  margin-top: 10px;
}

.fs-20 {
  font-size: 24px;
}

.icon-add-person-o {
  margin-right: -8px;
}

.list {
  overflow: auto;
  height: 400px;
}
</style>
